<template>
  <div>
    <div class="head">
      <CaseBox :title="'项目资料'" :isEmpty="true">
        <template #content> </template>
      </CaseBox>
      <div class="tools">
        <p class="upload" @click="uploadFile">上传文件</p>
        <p class="export" @click="exportFile">批量下载</p>
        <p class="dele" @click="deleFlie">批量删除</p>
      </div>
    </div>
    <div class="table_bg">
      <el-table
        height="70vh"
        :data="currentList"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"  />
        <el-table-column prop="id" label="序号"  width="155" />
        <el-table-column prop="name" label="文件名称" />
        <el-table-column prop="uploadTimeFormatted" label="上传年月" />
        <el-table-column label="操作" width="120">
          <template #default="{row}">
            <p class="opea" @click.prevent="detailRow(row)">下载</p>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        :page-size="page.size"
        :current-page="page.current"
        layout="prev, pager, next, sizes, total"
        @size-change="handSize"
        @current-change="handCurrent"
        :total="page.total">
      </el-pagination>
    </div>
    <el-dialog
      title="上传文件"
      v-model="uploadVisiable"
      @close="onClose"
      width="10rem"
    >
      <el-form >
        <!-- <el-form-item label="文件:" :label-width="formLabelWidth">
          <input ref="file" class="file" type="file" multiple />
        </el-form-item> -->
        <el-form-item label="文件:" label-width="1rem">
          <el-upload
            drag
            ref="uploadRef"
            action="http://123.57.109.182:8081/gz/guzhen/document/upload"
            :auto-upload="false"
            :show-file-list="true"
            :on-change="handleChange"
            :on-success="handleSuccess"
            multiple
          >
            <img class="icon" src="../../assets/upload1.png" alt="">
            <div class="el-upload__text">将文件拖至此处，或点击上传</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onClose">取消</el-button>
          <el-button @click="upload" type="primary"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import CaseBox from "../../components/Case.vue";
import { ElTable } from "element-plus";
import request from "@/utils/request";
import {ref} from 'vue'
import { ElMessageBox,ElMessage,ElLoading } from "element-plus";
import { reactive } from "vue";

export default {
  name: "materialView",
  components: {
    CaseBox,
    ElTable,
  },
  setup() {
    //定义文件信息数组，用于上传oss
    let fileArray = [];
    let loading;
    let currentIds = [];
    const uploadRef = ref()
    const currentList = ref([])
    const uploadVisiable = ref(false)
    const page = reactive({
      total:100,
      size:10,
      current:1
    })
    const handSize = (size)=>{
      console.log(size,'handSize');
      page.size = size
      initList()
    }
    const handCurrent = (current)=>{
      console.log(current,'handCurrent');
      page.current = current
      initList()
    }
    const initList = () => {
      request.post("/document/list", {
        current: page.current,
        size: page.size,
      }).then(res=>{
        currentList.value = res.data.data.records
        page.total = res.data.data.total
        console.log(initList,'initList');
      })
    };
    initList()
    const uploadFile = ()=>{
      uploadVisiable.value = true
    }
    const exportFile = ()=>{
      if(currentIds.length==0){
        ElMessage({
          message: "请选择文件！",
          type: "warning",
        });
        return
      }else{
        loading = ElLoading.service({
          lock: true,
          text: "文件导出中...",
          background: "rgba(0, 0, 0, 0.7)",
        });
        console.log(currentIds,'currentIds');
        request.post(`/document/downLoad`, {
          ids:currentIds,
        }).then(res=>{
          console.log(res,'exportFile');
          window.open(res.data.data)
          loading.close()
        })
      }
    }
    const handleSelectionChange  =(list)=>{
      currentIds = list.map(item=>{
        return item.id.toString()
      })
      console.log(currentIds,'handleSelectionChange');
    }
    const detailRow = (row)=>{
      console.log(row,'detailRow');
      request.get(`document/getById?id=${row.id}`).then(res=>{
        console.log(res.data.data.url,'detailRow');
        window.open(res.data.data.url)
      })
    }
    const deleFlie = ()=>{
      if(currentIds.length==0){
        ElMessage({
          message: "请选择文件！",
          type: "warning",
        });
        return
      }else{
        ElMessageBox.confirm('你确认删除当前选中文件吗?', 'Warning', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          console.log(currentIds,'currentIds');
          request.post(`/document/batchDelete`, {
            ids:currentIds,
          }).then(res=>{
            console.log(res,'deleFlie');
            initList()
            ElMessage({
              message: "删除成功！",
              type: "success",
            });
          })
        }).catch(() => {
          ElMessage({
            type: 'info',
            message: '操作已取消!'
          });
          // 在这里执行取消后的逻辑
        });
      }
    }
    //添加文件的回调
    const handleChange = (file, files) => {
      console.log(file.raw,files);
      fileArray.push(file.raw);
      console.log(fileArray,'fileArray');
    };
    //添加文件的回调
    const handleSuccess = (response, file, fileList) => {
      loading.close();
      uploadVisiable.value = false
      ElMessage({
        message: "文件上传成功！",
        type: "success",
      });
      initList()
      console.log(response, file, fileList,'handleSuccess');
    };
    const upload = () => {
      if(fileArray.length==0) {
        ElMessage({
          message: "请上传至少一个文件！",
          type: "warning",
        });
        return
      }
      loading = ElLoading.service({
        lock: true,
        text: "文件上传中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      uploadRef.value.submit()
    };
    const onClose = () => {
      uploadVisiable.value = false
      uploadRef.value.clearFiles()
    };

    const tableRowClassName = ({ row, rowIndex }) => {
      // console.log(row, rowIndex, "tableRowClassName");
      if (rowIndex % 2 == 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    };
    return {
      page,
      uploadRef,
      currentList,
      uploadVisiable,
      initList,
      handSize,
      handCurrent,
      upload,
      uploadFile,
      handleSuccess,
      handleChange,
      exportFile,
      deleFlie,
      detailRow,
      onClose,
      tableRowClassName,
      handleSelectionChange
    };
  },
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // .CaseBox{
  //   margin-top: 1000px;
  // }
  .tools {
    display: flex;
    line-height: 0.4rem;
    p {
      padding: 0 0.2rem;
      margin-left: 0.125rem;
      background-size: 100%;
      cursor: pointer;
    }
    .upload {
      background-image: url(../../assets/upload.png);
    }
    .export {
      background-image: url(../../assets/export.png);
    }
    .dele {
      background-image: url(../../assets/dele.png);
    }
  }
}
.table_bg{
  padding: .2rem;
  border-radius: .15rem;
  background-color: rgba(97, 181, 247, 0.15);
}
.opea {
  cursor: pointer;
  color: rgb(219, 219, 222);
}
.icon{
  width: .8rem;
}

.pagination{
  margin: .1rem auto;
  display: flex;
  justify-content: center;
}
:deep(.el-pagination){
  margin-top: .3rem;
  --el-pagination-button-bg-color:#214b724a
}
:deep(.el-pager li){
  color:#63D8E0
}
:deep(.el-icon svg){
  color:#63D8E0;
  // width: 1.3em;
  // height: 1.3em
}

:deep(.el-pagination__total){
  color:#63D8E0
}
:deep(.el-select__wrapper){
  background-color: #214b7294;
  box-shadow:none
}
:deep(.el-select__placeholder){
  color:#63D8E0
}
:deep(.el-pagination.is-background .btn-prev:disabled){
  background-color: #214b724a;
}
:deep(.el-pagination.is-background .btn-next:disabled){
  background-color: #214b724a;
}
:deep(.el-pagination.is-background .el-pager li.is-active){
  background-color: #214b72d7;
}

:deep(.el-table) {
  color: aliceblue;
  --el-table-row-hover-bg-color: none;
  --el-table-bg-color:none !important;
  --el-table-tr-bg-color:none !important;
  --el-table-header-bg-color:#5261774a;
  --el-table-border-color:none
}
// :deep(.el-table .cell){
//   line-height: .25rem;
// }
// :deep(.el-table .el-table__cell){
//   padding: 0;
// }
:deep(.el-table thead){
  color: rgba(97, 181, 247, 1);
}
:deep(.el-table .success-row) {
  --el-table-tr-bg-color: #5261774a;
}
:deep(.el-table th.el-table__cell) {
  // background-color: #1a528bb3;
}
:deep(.el-table .warning-row) {
  // --el-table-tr-bg-color: #5261774a;
}
:deep(.el-table td.el-table__cell) {
  border-bottom: none;
}
:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: none;
}
td div,
th div,
button span {
  color: aliceblue;
}
:deep(.el-dialog__header) {
  border-bottom: 2px solid rgb(242, 237, 237);
}
:deep(.el-dialog__body) {
  padding: 30px 0 0 30px;
}
:deep(.el-upload-dragger) {
  width: 5rem;
}
</style>
